<template>
   <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="25%" align="left">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">

          <el-form-item label="角色名称" prop="rolename">
            <el-input v-model="ruleForm.rolename"></el-input>
          </el-form-item>

          <el-form-item label="所属分组" prop="rolegroup">
            <el-select v-model="ruleForm.rolegroup" placeholder="请选择所属分组">
              <el-option label="自定义分组" value="自定义分组"></el-option>
              <!-- <el-option label="财务中心岗位角色" value="财务中心岗位角色" v-for="item in listData"></el-option>
              <el-option label="技术部岗位角色" value="技术部岗位角色"></el-option> -->

              <el-option :label="item.rolegroup" :value="item.rolegroup" v-for="item in listData"></el-option>

            </el-select>
          </el-form-item>

          <el-form-item label="分组名" v-if="ruleForm.rolegroup === '自定义分组'"  prop="rolegroup">
            <el-input type="text" v-model="addGroup"></el-input>
          </el-form-item>

          <el-form-item label="排序">
            <el-input type="number" v-model="ruleForm.orderindex"></el-input>
          </el-form-item>

          <el-form-item label="备注">
            <el-input type="textarea" v-model="ruleForm.rolermk"></el-input>
          </el-form-item>

          <el-form-item align='right'>
            <el-button type="primary" @click="submitForm('ruleForm')" v-if="butType ==='add'">立即创建</el-button>
            <el-button type="primary" @click="updateSubmitForm('ruleForm')" v-if="butType ==='update'">立即修改</el-button>
            <el-button @click="resetForm('ruleForm')">重置 </el-button>
          </el-form-item>

        </el-form>
   </el-dialog>
</template>
<script>
  export default{
    props:["listData"],
    data(){
      return{
        dialogTitle:'',
        dialogFormVisible: false,
        ruleForm: {
          companyid   : this.$store.getters.companyId,       //公司码 
          ctUserid    : '',
          orderindex  : '',
          rolename    : '',
          rolegroup   : '',
          rolermk     : ''
        },
        addGroup    : '',
        rules: {
          rolename: [
            { required: true, message: '请输入角色名称', trigger: 'blur' },
            { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
          ],
          rolegroup: [
            { required: true, message: '请选择所属分组', trigger: 'change' }
          ]
        },
        butType:''
      }
    },
    methods:{
      submitForm(formName) {
        if(this.ruleForm.rolegroup === "自定义分组")
        {
          this.ruleForm.rolegroup = this.addGroup
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
           this.$post("/role/savaRole",this.ruleForm,(data)=>{
              this.dialogFormVisible=false;
              this.$message({
                  type: 'success',
                  message: '添加成功!',
                  callback: this.$emit('getRoleList')
                });
               },(err)=>{
                alert(err);
            });
          }else{
            console.log('error submit!!');
            return false;
          }
        });
      },
      updateSubmitForm(formName){
        if(this.ruleForm.rolegroup === "自定义分组")
        {
          this.ruleForm.rolegroup = this.addGroup
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
           this.$post("/role/updateRole",this.ruleForm,(data)=>{
              this.dialogFormVisible=false;
              this.$message({
                  type: 'success',
                  message: '添加成功!',
                  callback: this.$emit('getRoleList')
                });
               },(err)=>{
                alert(err);
            });
          }else{
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      roleUpdateFn(data,tp){      // 修改
        this.butType = tp;
        this.ruleForm  = data;
        this.dialogTitle ="修改岗位角色";
        this.dialogFormVisible = true;
      },
      roleAddFn(tp){ // 新增
        this.butType = tp;
        this.dialogFormVisible = true;
        this.dialogTitle   = "添加岗位角色";
      }
    }
  }
</script>

<style>
 textarea{
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
 }
</style>
